<template>
    <div>
        <nav>
            <ul>
                <li :class="isShow == 0 ? 'active' : ''" @click="isShow = 0">全部(0)</li>
                <li :class="isShow == 1 ? 'active' : ''" @click="isShow = 1">未审核(0)</li>
                <li :class="isShow == 2 ? 'active' : ''" @click="isShow = 2">已通过(0)</li>
                <li :class="isShow == 3 ? 'active' : ''" @click="isShow = 3">未通过(0)</li>
            </ul>
        </nav>
        <template v-show="isShow == 0">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="文章名" width="160" />
                <el-table-column prop="name" label="作者" width="160" />
                <el-table-column prop="name" label="文章类型" width="160" />
                <el-table-column prop="name" label="评论用户" width="160" />
                <el-table-column prop="name" label="评论内容" width="360" />
                <el-table-column prop="name" label="评论状态" width="180" />

            </el-table>
        </template>
        <template v-show="isShow == 1">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="文章名" width="160" />
                <el-table-column prop="name" label="作者" width="160" />
                <el-table-column prop="name" label="文章类型" width="160" />
                <el-table-column prop="name" label="评论用户" width="160" />
                <el-table-column prop="name" label="评论内容" width="360" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 查看 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 通过 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 不通过 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-show="isShow == 2">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="文章名" width="160" />
                <el-table-column prop="name" label="作者" width="160" />
                <el-table-column prop="name" label="文章类型" width="160" />
                <el-table-column prop="name" label="评论用户" width="160" />
                <el-table-column prop="name" label="评论内容" width="360" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 查看 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 不通过 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-show="isShow == 3">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="文章名" width="160" />
                <el-table-column prop="name" label="作者" width="140" />
                <el-table-column prop="name" label="文章类型" width="140" />
                <el-table-column prop="name" label="评论用户" width="140" />
                <el-table-column prop="name" label="品论内容" width="140" />
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 查看 </el-button>
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 通过 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
let isShow = ref(0);
const tableData = [
    {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
];
</script>

<style lang="scss" scoped>
ul {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    font-size: 14px;
    li {
        width: 120px;
        text-align: center;
        margin-right: 10px;
        border-radius: 15px;
        box-shadow: 0 0 2px rgba($color: #000000, $alpha: 0.2);
    }
    .active {
        background-color: #8076a3;
        color: #fff;
    }
}
template {
    display: block;
}
</style>
